<script setup>
import { getNotice, saveNotice } from "@/api/biz/arcticle";
import { listBizHousingInfo } from "@/api/biz/bizHousingInfo";
import SvgIcon from "@/components/SvgIcon/index.vue";
import storage from "@/utils/storage";
import { TOKEN } from "@/store/mutation-types";
const props = defineProps({
  id: {
    type: [Number, String],
    default: ""
  },
  noticeType: {
    type: [Number, String],
    default: 0
  }
});

const formRef = ref();
// const content = ref("<h1>Fantastic-admin</h1>");
const data = reactive({
  loading: false,
  form: {
    id: props.id,
    noticeType: props.noticeType
  },
  rules: {},
  loading: false,
  dialogVisible: false,
  noticeTypeList: [
   
    { label: "客服咨询", value: "4" },
    { label: "赔付条款", value: "5" },
    { label: "用户协议", value: "6" },
    { label: "服务与说明", value: "7" },
    { label: "回收协议", value: "8" },
    { label: "公示公告", value: "2" },
    { label: "关于我们", value: "3" },
  ]
});
const fileHeahers = ref({
  url: import.meta.env.VITE_APP_API_BASEURL + "/common/upload",
  headers: {
    Authorization: "Bearer " + storage.local.get(TOKEN)
  }
});
onMounted(() => {
  if (data.form.id != "") {
    getInfo();
  } else {
    data.form.noticeType = props.noticeType;
  }
});

function getInfo() {
  data.loading = true;
  getNotice(props.id).then((res) => {
    data.loading = false;
    data.form = res.data;
  });
}
function handleAvatarSuccess(res, file) {
  console.log(file.response.data.url);
  data.form.contentImage = file.response.data.url;
}
defineExpose({
  submit(callback) {
    if (data.form.id == "") {
      formRef.value.validate((valid) => {
        if (valid) {
          saveNotice(data.form).then(() => {
            ElMessage.success({
              message: "保存成功",
              center: true
            });
            callback && callback();
          });
        }
      });
    } else {
      formRef.value.validate((valid) => {
        if (valid) {
          saveNotice(data.form).then(() => {
            ElMessage.success({
              message: "修改成功",
              center: true
            });
            callback && callback();
          });
        }
      });
    }
  }
});
</script>

<template>
  <div v-loading="data.loading">
    <el-form
      ref="formRef"
      :model="data.form"
      :rules="data.rules"
      label-width="120px"
      label-suffix=" "
      label-position="top"
      style="padding: 0 20px"
    >
      <el-row :gutter="30">
        <el-col :span="8">
          <el-form-item label="文章类型" prop="noticeType">
            <el-select
              v-model="data.form.noticeType"
              style="width: 100%"
              disabled
            >
              <el-option
                v-for="item in data.noticeTypeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="22">
          <el-form-item label="标题" prop="noticeTitle">
            <el-input placeholder="标题" v-model="data.form.noticeTitle" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="8">
          <el-form-item label="封面图片" prop="contentImage">
            <el-upload
              class="avatar-uploader"
              :action="fileHeahers.url"
              :headers="fileHeahers.headers"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
            >
              <img
                v-if="data.form.contentImage"
                :src="data.form.contentImage"
                class="avatar"
              />

              <svg-icon
                v-else
                class="el-icon-plus avatar-uploader-icon"
                name="ep:plus"
              />
            </el-upload>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="发布状态" prop="status">
            <el-switch
              v-model="data.form.status"
              active-text="否"
              inactive-text="是"
              active-value="1"
              inactive-value="0"
              inline-prompt
              style="
                --el-switch-off-color: #409eff;
                --el-switch-on-color: #ff4949;
              "
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="阅读数量" prop="looks">
            <el-input-number placeholder="阅读数量" v-model="data.form.looks" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="24">
          <el-form-item label="文章内容" prop="noticeContentHtml">
            <editor v-model="data.form.noticeContentHtml"
          /></el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<style scoped>
.container_map {
  overflow: hidden;
}
.addListBox {
  height: 60vh;
  overflow-y: auto;
}
.additem {
  padding: 10px;
  border-bottom: 1px dotted #eee;
  cursor: pointer;
}
.additem:hover {
  background: rgb(174 174 233 / 10%);
}
.additem .name {
  font-size: 16px;
  color: #222;
}
.additem .addinfo {
  color: #666;
  font-size: 14px;
}

.avatar-uploader .el-upload {
  border: 2px solid #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 240px;
  height: 125px;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 38px;
  color: #409eff;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 240px;
  height: 125px;
  display: block;
}
</style>
